<template>
  <el-container>
    <mainNav/> 
    <el-aside width="380px">
        <el-card class="projectInfo">
            <h2>第一个项目</h2>
            <el-input v-model="apikey" placeholder="请输入关键字"></el-input>   
            <div class="infoBar">
                <i class="setting-icon el-icon-document"></i>
                <i class="setting-icon el-icon-folder-opened"></i>
                <i class="setting-icon el-icon-view"></i>
                <i class="setting-icon el-icon-share"></i>
                <i class="setting-icon el-icon-info"></i>
            </div>
        </el-card>
        <ul>
        <li @click="showFunc">函数</li>
        <li @click="showHttp">Http</li>
    </ul>
        <el-tree
  :data="treeNode"
  node-key="id"
  default-expand-all
  @node-drag-start="handleDragStart"
  @node-drag-enter="handleDragEnter"
  @node-drag-leave="handleDragLeave"
  @node-drag-over="handleDragOver"
  @node-drag-end="handleDragEnd"
  @node-drop="handleDrop"
  @node-click="showNodeData"
  draggable
  :highlight-current="true"
  :expand-on-click-node="false"
  :allow-drop="allowDrop"
  :allow-drag="allowDrag">

  <span class="custom-tree-node" slot-scope="{ node, data }">
    <span>
        <i v-if="data.type=='func' && (!data.children || data.children.length==0)" class="setting-icon el-icon-document"></i>
        <i v-else-if="data.type=='http' && (!data.children || data.children.length==0)" class="setting-icon el-icon-share"></i>
        <i v-else-if="data.type=='var' && (!data.children || data.children.length==0)" class="setting-icon el-icon-view"></i>
        <i v-else class="setting-icon el-icon-folder-opened"></i>        
        {{ node.label }}</span>
     
        

        <el-dropdown class="menu-right">
        <span class="el-dropdown-link">
            <i  class="el-icon-more-outline"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>重命名</el-dropdown-item>
            <el-dropdown-item>复制</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
        </el-dropdown-menu>
        </el-dropdown>
     
    </span>

</el-tree>
        
    </el-aside> 
    <el-main class="projectpage">
 
        <el-tabs v-model="currentTab"
        @tab-remove="removeTab">
            <el-tab-pane name="home" type="border-card"
            :stretch="true">
              <span slot="label">首页</span>
              <projectInfoCompontent/>              
            </el-tab-pane>
            <el-tab-pane :name="item.name" v-for="item in tabList" :key="item.name"
            :closable="true">
              <span slot="label">{{item.name}}</span>
              <div class="tabs-con clearfix" :is="item.compontent" ></div>{{item.name}}
            </el-tab-pane>
        </el-tabs>
    
    </el-main>
  </el-container>
</template>
<script>

import mainNav from "@/components/mainNav.vue"
import projectInfoCompontent from "~/components/project/projectInfoCompontent.vue"
import funcCompontent from "~/components/project/funcCompontent.vue"
import httpCompontent from "~/components/project/httpCompontent.vue"
export default {
    layout:"blank",
    components:{
        funcCompontent,
        httpCompontent,
        projectInfoCompontent,
        mainNav
    },
    data: () => ({        
        tabList:[],
        index:1,
        currentTab:"home",
        apikey:"",
        treeNode:[{
          id: 1,
          label: '一级 1',
          type:"func",
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,type:"func",
              label: '三级 1-1-1'
            }, {
              id: 10,type:"http",
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          type:"http",
          label: '一级 2',
          children: [{
            id: 5,type:"var",
            label: '二级 2-1'
          }, {
            id: 6,type:"http",
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          type:"var",
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2',
            children: [{
             id: 11,
              label: '三级 3-2-1'
            }, {
              id: 12,
              label: '三级 3-2-2'
            }, {
              id: 13,
              label: '三级 3-2-3'
            }]
          }]
        }]
    }),
    created:function(){
    },
    methods:{
       showHttp(){debugger;
           this.tabList.push({
               id:this.index++,
               name:"http_"+this.index,
               compontent:"funcCompontent"
           });
           this.currentTab="http_"+this.index;
       },
       showFunc(){
           this.tabList.push({
               id:this.index++,
               name:"func_"+this.index,
               compontent:"httpCompontent"
           });
           this.currentTab="func_"+this.index;
       },
       showNodeData(data,node,nodecomp){
            if(data.children || !data.type){
                return;
            }
            var haskey=false;
            for (let index = 0; index < this.tabList.length; index++) {
                const element = this.tabList[index];
                if(element.id==data.id){
                    haskey=true;
                    break;
                }                
            }
            debugger;
            if(!haskey){
                this.tabList.push({
                id:data.id,
                name:data.type+''+data.label,
                compontent:data.type+"Compontent"
                });
            }
            this.currentTab=data.type+''+data.label;
       },
       removeTab(name){
           let indexOf=0;
           for (let index = 0; index < this.tabList.length; index++) {
               const element = this.tabList[index];
               if(element.name!=name){continue;}
               indexOf=index;
           }
           if(indexOf>0){
                this.currentTab=this.tabList[indexOf-1].name;                
           }else{
                this.currentTab="home";
           }
           this.tabList.splice(indexOf,1);       
       },
       handleDragStart(node, ev) {
        console.log('drag start', node);
      },
      handleDragEnter(draggingNode, dropNode, ev) {
        console.log('tree drag enter: ', dropNode.label);
      },
      handleDragLeave(draggingNode, dropNode, ev) {
        console.log('tree drag leave: ', dropNode.label);
      },
      handleDragOver(draggingNode, dropNode, ev) {
        console.log('tree drag over: ', dropNode.label);
      },
      handleDragEnd(draggingNode, dropNode, dropType, ev) {
        console.log('tree drag end: ', dropNode && dropNode.label, dropType);
      },
      handleDrop(draggingNode, dropNode, dropType, ev) {
        console.log('tree drop: ', dropNode.label, dropType);
      },
      allowDrop(draggingNode, dropNode, type) {
        if (dropNode.data.label === '二级 3-1') {
          return type !== 'inner';
        } else {
          return true;
        }
      },
      allowDrag(draggingNode) {
        return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
      }
    }
}
</script>

<style lang="scss" scoped>
    .el-container{position: relative;}
    .el-aside{width:380px;top:60px;position: absolute;z-index: 10;}
    .el-main{width:100%;padding-left: 390px;top:60px;position: absolute;padding-top: 0px;}
    .projectInfo{
        background: rgb(246, 246, 246);
        padding: 0px 20px;
        border-bottom: 2px solid rgb(232, 232, 232);
        h2{
            text-align: center;
            color: rgb(96, 98, 102);
        }
        .infoBar{margin-top:20px;}
        .setting-icon{
            width:15%;
            font-size:18px ;
            text-align: center;
        }
    }
    
    .custom-tree-node {
        position: relative;
        width:100%;
    }
    .custom-tree-node .menu-right{
        display: none;
        position: absolute;
        right: 10px;
        top:0px;
    }
    .el-tree-node__content:hover .custom-tree-node .menu-right{
        display: inline-block;
    }
</style>